import { List, TextareaItem, InputItem, WhiteSpace, WingBlank, Picker } from 'antd-mobile';
import { createForm } from 'rc-form';

const Item = List.Item;
const Brief = Item.Brief;


class App extends React.Component {

  constructor(props) {
      super(props);

      let items = [];

      if (props.record.jsjsp) {
          items = props.record.jsjsp.split('|');
      }

      this.state = {
        jsjsp: props.record.jsjsp,
        item1: items.length > 0 ? items[0] : '',
        item2: items.length > 1 ? items[1] : '',
        item3: items.length > 2 ? [items[2]] : '',
      };
  }

  updateData(data) {
      let s = Object.assign({
          item1: this.state.item1,
          item2: this.state.item2,
          item3: this.state.item3,
      }, data);

      this.setState(Object.assign({jsjsp: s.item1 + "|" + s.item2 + "|" + s.item3}, data));
  }


  render() {
    const name = this.props.nodeName;

    return (
      <div className={name}>
        <h2 className="step-title">{this.props.title}</h2>

        <input type="hidden" value={this.state.jsjsp} name="jsjsp"></input>

        <List renderHeader={() => 'Office办公软件(限20字)'}>
            <TextareaItem
                rows='5'
                value={this.state.item1}
                autoHeight
                count={20}
                placeholder="请填写Office办公软件使用水平"
                onChange={(v) => this.updateData({ item1: v })}
            />
        </List>
        <WhiteSpace />

        <List renderHeader={() => 'SPSS、STATA等统计软件(限20字)'}>
            <TextareaItem
                rows='5'
                value={this.state.item2}
                autoHeight
                count={20}
                placeholder="请填写SPSS、STATA等统计软件使用水平"
                onChange={(v) => this.updateData({ item2: v })}
            />
        </List>
        <WhiteSpace />

        <List>
            <Picker
                data={[{label: '三级', value: '三级'}, {label: '二级', value: '二级'}, 
                    {label: '一级', value: '一级'}, {label: '无', value: '无'}]}
                cols={1}
                onChange={v => this.updateData({ item3: v })}
                value={this.state.item3}
                className="forss"
            >
                <List.Item arrow="horizontal">全国计算机等级考试</List.Item>
            </Picker>
        </List>
            
      </div>
    );
  }
}

const Step7 = createForm()(App);

export default Step7
